<template>
	<view class="myPage">
		<view class="myContent">
			<view class="myBg">
				<u--image src="/static/my/1.png" shape="square" mode="aspectFill" width="100vw" height="400rpx">
				</u--image>
			</view>
			<view class="myInfo" @click="goDetail">
				<view class="avatar">
					<u--image :src="avatarUrl" shape="circle" mode="aspectFill" width="124rpx" height="124rpx">
					</u--image>
					<view class="avatarTag">
						<view class="avatarTagContent">
							<u--image src="/static/my/9.png" shape="circle" mode="aspectFill" width="90rpx"
								height="32rpx">
							</u--image>
							<view class="avatarTagName">{{userNum}}</view>
						</view>
					</view>
				</view>
				<view class="nickName">{{nickName}}</view>
				<view class="roleTag">
					<u--image src="/static/my/8.png" shape="square" mode="aspectFill" width="128rpx" height="36rpx">
					</u--image>
					<view class="roleName">认证{{role}}</view>
				</view>
				<view class="myDetail">
					<u--image src="/static/right2.png" shape="circle" mode="aspectFill" width="16rpx" height="32rpx">
					</u--image>
				</view>
			</view>
			<view style="height: 400rpx;width: 100vw;"></view>
			<view class="menuContent">
				<view class="menuList">
					<view v-for="(item,index) in menuList" :key="index" class="menuItem" @click="goRecordsList(item)">
						<view class="menuIcon">
							<u--image :src="item.icon" shape="square" mode="aspectFill" width="100rpx" height="100rpx">
							</u--image>
						</view>
						<view class="menuTitle">{{item.title}}</view>
						<view v-if="index==3 && commentsNum>0" class="numbadge">
							<u-badge type="error" shape="circle" :value="commentsNum"></u-badge>
						</view>
					</view>
				</view>
			</view>
			<view class="cellContent">
				<view class="cellList">
					<u-cell-group :border="false">
						<u-cell v-for="(item,index) in cellList" :key="index" :border="false" :title="item.title" isLink
							:icon="item.icon" :iconStyle="iconStyle" :clickable="true" :center="true" :url="item.url"
							linkType="navigateTo">
							<text slot="value"
								style="color:#999999FF;fontSize:22rpx">{{item.value?(item.value+ userScore):''}}</text>
						</u-cell>
					</u-cell-group>
				</view>
				<view class="cellList" style="margin-top: 40rpx;">
					<u-cell-group :border="false">
						<u-cell v-for="(item,index) in cellList2" :key="index" :border="false" :title="item.title"
							isLink :icon="item.icon" :iconStyle="iconStyle" :clickable="true" :center="true"
							:url="item.url" linkType="navigateTo">
							<text slot="value" style="color:#999999FF;fontSize:22rpx">{{item.value}}</text>
						</u-cell>
					</u-cell-group>
				</view>
			</view>
		</view>
		<tabbar :current="4"></tabbar>
	</view>
</template>

<script>
	import Tabbar from "@/components/tabbar.vue";
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				authList: [{
					id: "auth_1",
					name: "我是学生",
					describe: "学习课程",
					icon: "/static/auth/1.png"
				}, {
					id: "auth_2",
					name: "我是老师",
					describe: "直播开课",
					icon: "/static/auth/2.png"
				}, {
					id: "auth_3",
					name: "我是工程师",
					describe: "交流学习",
					icon: "/static/auth/3.png"
				}
				// , {
				// 	id: "auth_4",
				// 	name: "我是企业",
				// 	describe: "商业合作",
				// 	icon: "/static/auth/4.png"
				// }
				],
				avatarUrl: "",
				nickName: "",
				role: "",
				userNum: "",
				iconStyle: {
					paddingRight: "10rpx"
				},
				menuList: [{
					title: "我的记录",
					icon: "/static/my/10.png",
					url: "/pages/myRecords/myRecords",
					needlogin: true
				}, {
					title: "我的帖子",
					icon: "/static/my/11.png",
					url: "/pages/myCommunity/myCommunity",
					needlogin: false
				}, {
					title: "V商城",
					icon: "/static/my/14.png",
					url: "/pages/vShoppingmall/vShoppingmall",
					needlogin: true
				}, {
					title: "评论消息",
					icon: "/static/my/16.png",
					url: "/pages/commentDetail/commentDetail",
					needlogin: true
				}],
				cellList: [{
					icon: "/static/my/17.png",
					title: "我的评论",
					url: "/pages/myCommentList/myCommentList"
				},{
					icon: "/static/my/15.png",
					title: "我的收藏",
					url: "/pages/myCollection/myCollection"
				}, {
					icon: "/static/my/7.png",
					title: "邀请好友",
					url: "/pages/invitation/invitation"
				}, {
					icon: "/static/my/6.png",
					title: "任务中心",
					url: "/pages/taskCenter/taskCenter"
				}, {
					icon: "/static/my/5.png",
					title: "V积分",
					value: "当前V积分：",
					url: "/pages/vIntegral/vIntegral"
				}, {
					icon: "/static/my/4.png",
					title: "兑换记录",
					url: "/pages/myExchangeList/myExchangeList"
				}],
				cellList2: [{
					icon: "/static/my/3.png",
					title: "联系我们",
					url: "/pages/custumService/custumService"
				}, {
					icon: "/static/my/2.png",
					title: "问题反馈",
					url: "/pages/callBack/callBack"
				}],
				userId: "",
				userScore: 0,
				isLoad: false,
				commentsNum: 0,
				pageParams:{
					pageSize: 20,
					pageNumber: 1,
					total:1,
					totalPages:1,
				}
			}
		},
		onShow() {
			if (this.isLoad) {
				this.$request.get(this.$api.getUserById, {
					id: this.userId
				}).then(result => {
					this.userScore = result.result.integral;
					uni.hideLoading()
				})
				this.getComments()
			}
		},
		onLoad() {
			this.$request.get(this.$api.getDic, {
				code: "role"
			}).then(roleInfo => {
				uni.hideLoading()
				this.authList.map((item, index) => {
					item.value = roleInfo[index].value
					item.name = roleInfo[index].text
				})
				uni.getStorage({
					key: "userInfo",
					success: (res) => {
						this.$request.get(this.$api.getUserById, {
							id: res.data.id
						}).then(result => {
							uni.hideLoading()
							uni.setStorage({
								key: "userInfo",
								data: result.result
							})
							let info = result.result;
							this.avatarUrl = info.headPic
							this.nickName = info.nickname
							this.userNum = info.userNum
							this.userId = info.id
							this.userScore = info.integral;
							this.isLoad = true;
							this.authList.map(item => {
								if (item.value == info.role) {
									this.role = item.name
								}
							})
							this.getComments()
						})
					}
				})
			})
			
		},
		methods: {
			getComments() {
				this.$request.get(this.$api.replyCount, {
					userId: this.userId
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					const { success, result } = res
					if (success) {
						this.commentsNum = result
					} else {
						this.commentsNum = 0
					}
				})
			},
			updateUser() {
				uni.getStorage({
					key: "userInfo",
					success: (res) => {
						this.$request.get(this.$api.getUserById, {
							id: res.data.id
						}).then(result => {
							uni.hideLoading()
							uni.setStorage({
								key: "userInfo",
								data: result.result
							})
							let info = result.result;
							this.avatarUrl = info.headPic
							this.nickName = info.nickname
							this.userNum = info.userNum
							this.userId = info.id
							this.userScore = info.integral;
							this.isLoad = true;
							this.authList.map(item => {
								if (item.value == info.role) {
									this.role = item.name
								}
							})
						})
					}
				})
			},
			goDetail() {
				uni.navigateTo({
					url: "/pages/myInfo/myInfo"
				})
			},
			goRecordsList(item) {
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.myPage {
		height: calc(100vh - 100rpx);
		overflow-y: auto;
	}

	.myBg {
		position: absolute;
		left: 0;
		top: 0;
	}

	.myInfo {
		display: flex;
		justify-content: flex-start;
		z-index: 1;
		top: 200rpx;
		position: absolute;
		align-items: center;
		padding: 0rpx 40rpx;
		width: calc(100vw - 80rpx);

		.avatar {
			position: relative;
			border: 1px solid #fafafa;
			border-radius: 50%;
			background: #D8D8D8;

			.avatarTag {
				position: absolute;
				bottom: 0;
				left: 60%;

				.avatarTagContent {
					position: relative;

					.avatarTagName {
						position: absolute;
						left: 30rpx;
						top: 0rpx;
						color: #FCEC8D;
						font-size: 20rpx;
						line-height: 32rpx;
						font-weight: bold;
						font-family: PingFang SC-Bold, PingFang SC;
					}
				}
			}
		}

		.nickName {
			font-size: 40rpx;
			color: #333333FF;
			padding: 0 30rpx;
			position: relative;
			top: -4rpx;
			max-width: 270rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}

		.roleTag {
			display: flex;
			position: relative;

			.roleName {
				position: absolute;
				color: #004DA1FF;
				font-size: 22rpx;
				line-height: 36rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
			}
		}

		.myDetail {
			position: absolute;
			right: 20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 2;
		}
	}

	.menuContent {
		position: relative;
		top: -40rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 80rpx);
		padding: 0rpx 40rpx;
		z-index: 3;

		.menuList {
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 20rpx 40rpx;
			height: 160rpx;

			.menuItem {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				.numbadge {
					position: absolute;
					left: 70rpx;
					top: -10rpx;
				}
			}

			.menuTitle {
				font-size: 24rpx;
				color: #333333FF;
				padding-top: 20rpx;
			}
		}
	}

	.cellContent {
		width: calc(100vw - 80rpx);
		padding: 0rpx 40rpx;
		z-index: 3;
		position: relative;
		top: -10rpx;
		padding-bottom: 50rpx;

		.cellList {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 10rpx;
		}
	}
</style>
